<template>
  <div class="search">
    <div class="box">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="searchContent">搜索</el-button>
    </div>
    <div class="bgc">
      <div class="content">
        <div
          v-for="(item, index) in courseData"
          :key="index"
          @click="linkInfo(item.courseZID)"
        >
          <CourseBox
            :imgsrc="item.img"
            :courseTitle="item.title"
            :wacthNumber="item.students"
            :autorimgsrc="item.autorImg"
            :autorName="item.autorName"
          ></CourseBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CourseBox from "@/components/ZComponents/courseBox";

export default {
  data() {
    return {
      input: "",
      courseData: [],
    };
  },
  components: {
    CourseBox,
  },

  methods: {
    linkInfo(id) {
      console.log(id);
      this.$router.push({ path: "/courseInfoz", query: { id } });
    },
    searchContent() {
      this.axios("/zjr/courseSearch", { params: { input: this.input } }).then(
        (res) => {
          this.courseData.length = 0;
          this.courseData.push(...res.data);
          console.log(res.data);
        }
      );
    },
  },
  mounted() {
    const inputText = this.$route.query.inputText || "绘画";
    this.input = inputText;
    console.log(inputText);
    this.axios("/zjr/courseSearch", { params: { input: inputText } }).then(
      (res) => {
        this.courseData.length = 0;
        this.courseData.push(...res.data);
        console.log(res.data);
      }
    );
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 20px 500px;
  display: flex;
  border-bottom: 1px solid rgb(238, 238, 238);
}
.bgc {
  background-color: rgb(243, 243, 243);
}
.content {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: 0 auto;
  // background-color: rgb(233, 233, 233);
}
</style>